<template>
	<view class="wrapper">
		<uni-nav-bar leftIcon="arrowleft" title="群公告" @clickLeft='$back' rightText="发布" @clickRight="add_notice()" backgroundColor="#F2F3F5" color='#333333'>
		</uni-nav-bar>
		<view class="group_notice" v-for="(val,index) in pageList" :key='val.id'>
			<view class="top_box">
				<view class="user_box">
					<dimg :src="val.userId | avatar" mode="" class="user_head"></dimg>
					<view class="user_name">{{val.nickname}}</view>
				</view>
				<view class="time">{{val.time | timediff}}</view>
			</view>
			<view class="content">
				{{val.text}}
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		data() {
			return {
				pageIndex:0,
				pageList:[],
				userId:'',
				roomid:''
			}
		},
		components:{
			uniNavBar
		},
		onLoad(e) {
			this.roomid=e.id
			this.userId=e.userId
		},
		onShow() {
			this.pageIndex=0
			this.pageList=[]
			this.noticesPage()
		},
		methods: {
			add_notice(){
				if(this.userId!=uni.getStorageSync('userinfo').userId){
					this.$sToast('暂无权限')
					return
				}
				this.$open('./add_notice?roomid='+this.roomid)
			},
			noticesPage() {
				this.$ajax(this.apiList.noticesPage, {
					roomId: this.roomid,
					pageIndex: this.pageIndex,
					pageSize: 20
				},'POST').then(res => {
					this.pageList=this.pageList.concat(res.data.pageData)
				});
			}
		},
		onReachBottom() {
			this.pageIndex++
			this.noticesPage()
		},
		onPullDownRefresh() {
			this.pageIndex=0
			this.pageList=[]
			this.noticesPage()
		}
	}
</script>

<style>
.wrapper{
	background-color: #F3F3F3;
}
.group_notice{
	display: flex;
	flex-direction: column;
	background-color: #ffff;
	margin-bottom: 20rpx;
}
.top_box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 38rpx 31rpx 15rpx 30rpx;
}
.user_box{
	display:flex;
	flex-direction: row;
}
.user_name{
	font:28rpx/38rpx "";
	font-weight:500;
	color:rgba(51,51,51,1);
}
.time{
	font:28rpx/38rpx "";
	font-weight:500;
	color:rgba(153,153,153,1);
}
.user_head{
	width:38rpx;
	height:38rpx;
	border-radius:50%;
	margin-right: 20rpx;
	overflow: hidden;
}
.content{
	font-size:28rpx/38rpx "";
	font-weight:500;
	color:rgba(102,102,102,1);
	margin: 0 31rpx 33rpx 32rpx;
}
</style>
